<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
	<link rel="stylesheet" type="text/css" href="/skin/css/amazeui.min1.css" />
	<link href="/skin/font/iconfont.css" rel="stylesheet" type="text/css" />
	<link href="/skin/css/index.css" rel="stylesheet" type="text/css" />
	<script src="/user/js/jquery.js"></script>
	<meta name="Keywords" content="" />
	<meta name="Description" content="" />
	<title>余额转赠-会员中心</title>
<style>
/* 设计稿 375px，1rem = 100px，换算方法：px值 ÷ 100 = rem值 */
:root{ --card:#fff; --line:#eef2f7; --text:#0f172a; --muted:#9aa3b2; --primary:#253043; }
a{-webkit-tap-highlight-color:transparent;outline:none;}
body { background: #f3f5f8; }

/* 页面容器 */
.transfer-container {
	padding: 0.16rem 0.2rem;
}

/* 表单卡片 */
.form-card {
	background: var(--card);
	border-radius: 0.12rem;
	padding: 0.16rem;
	margin-bottom: 0.16rem;
	box-shadow: 0 0.03rem 0.18rem rgba(0,0,0,.05);
}
.card-title {
	font-size: 0.16rem;
	font-weight: 700;
	color: #1e293b;
	margin-bottom: 0.16rem;
}

/* 表单项 */
.form-item {
	display: flex;
	align-items: center;
	padding: 0.14rem 0;
	border-bottom: 0.01rem solid var(--line);
}
.form-item:last-child {
	border-bottom: 0;
}
.form-label {
	width: 0.88rem;
	flex: 0 0 0.88rem;
	color: #1f2937;
	font-weight: 600;
	font-size: 0.14rem;
}
.form-control {
	flex: 1;
	display: flex;
	align-items: center;
	min-width: 0;
}
.form-control input[type=text] {
	width: 100%;
	border: 0;
	background: transparent;
	outline: none;
	font-size: 0.14rem;
	color: #111827;
	padding: 0;
	margin: 0;
	-webkit-tap-highlight-color: transparent;
}
.form-control input::placeholder {
	color: #c0c7d2;
}
.form-value {
	font-size: 0.14rem;
	color: #64748b;
}

/* 金额输入区域 */
.amount-input-row {
	display: flex;
	align-items: center;
	padding: 0.14rem 0;
}
.currency-symbol {
	font-size: 0.24rem;
	font-weight: 700;
	color: #1e293b;
	margin-right: 0.08rem;
}
.amount-input {
	flex: 1;
	border: 0;
	background: transparent;
	outline: none;
	font-size: 0.24rem;
	font-weight: 600;
	color: #111827;
	padding: 0;
	margin: 0;
	-webkit-tap-highlight-color: transparent;
}
.amount-input::placeholder {
	color: #cbd5e1;
	font-weight: 400;
}

/* 可用余额提示 */
.available-balance {
	font-size: 0.13rem;
	color: #94a3b8;
	margin-top: 0.08rem;
}
.available-balance span {
	color: #ef4444;
	font-weight: 600;
}

/* 全部转赠按钮 */
.transfer-all-btn {
	display: inline-block;
	background: #f1f5f9;
	color: #475569;
	padding: 0.06rem 0.16rem;
	border-radius: 0.16rem;
	font-size: 0.13rem;
	font-weight: 600;
	margin-top: 0.12rem;
	cursor: pointer;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}
.transfer-all-btn:active {
	background: #e2e8f0;
}

/* 协议区域 */
.agreement-section {
	background: #fff;
	border-radius: 0.12rem;
	padding: 0.16rem;
	margin-bottom: 0.16rem;
	box-shadow: 0 0.03rem 0.18rem rgba(0,0,0,.05);
}
.agreement-row {
	display: flex;
	align-items: center;
	margin-bottom: 0.12rem;
}
.agreement-row:last-child {
	margin-bottom: 0;
}

/* 自定义复选框 */
.custom-checkbox {
	display: flex;
	align-items: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.custom-checkbox input[type=checkbox] {
	display: none;
}
.checkbox-icon {
	width: 0.18rem;
	height: 0.18rem;
	border: 0.02rem solid #cbd5e1;
	border-radius: 0.04rem;
	margin-right: 0.08rem;
	position: relative;
	transition: all 0.2s;
}
.custom-checkbox input[type=checkbox]:checked + .checkbox-icon {
	background: #253043;
	border-color: #253043;
}
.custom-checkbox input[type=checkbox]:checked + .checkbox-icon::after {
	content: '✓';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-size: 0.12rem;
	font-weight: 700;
}
.checkbox-label {
	font-size: 0.14rem;
	color: #475569;
}
.checkbox-label a {
	color: #253043;
	font-size: .14rem;
	font-weight: 600;
	text-decoration: underline;
}

.record-link {
	color: #253043;
	font-size: 0.14rem;
	font-weight: 600;
	text-decoration: none;
}

/* 提交按钮 */
.submit-btn {
	width: 100%;
	height: 0.48rem;
	border: 0;
	border-radius: 0.1rem;
	background: #253043;
	color: #fff;
	font-size: 0.16rem;
	font-weight: 700;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	outline: none;
}
.submit-btn:active {
	background: #1f2937;
}
</style>
<script>
	// 设计稿 375px，1rem = 100px，换算方法：px值 ÷ 100 = rem值
	(function(){
		var docEl = document.documentElement;
		var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
		function recalc() {
			var clientWidth = docEl.clientWidth;
			if (!clientWidth) return;
			docEl.style.fontSize = (clientWidth / 375 * 100) + 'px';
		}
		if (!document.addEventListener) return;
		window.addEventListener(resizeEvt, recalc, false);
		document.addEventListener('DOMContentLoaded', recalc, false);
		recalc();
	})();
</script>
</head>
<body class="body">
<div class="main">
	<header id="header">
		<section class="head-b head-b1">
			<span class="u-left"><a href="javascript:history.go(-1);" class="back"><img src="/skin/img/back.png"/></a></span>
			<h1 id="t0">余额转赠</h1>
			<div class="u-right" href="#">
				<a href="/user/cashhzjl.php" style="color:white;position: absolute;top:0;right:.2rem;" class="hSearch right">转赠记录</a>
			</div>
		</section>
	</header>
	
	<div class="transfer-container">
		<form class="huzhuan">
			<input type="hidden" value="{$type}" name="type" />
			
			<!-- 赠予用户信息 -->
			<div class="form-card">
				<div class="card-title">赠予用户信息</div>
				<div class="form-item">
					<div class="form-label">用户账号</div>
					<div class="form-control">
						<input type="text" name="t1" id="cardid" placeholder="请输入对方账户" />
					</div>
				</div>
				<div class="form-item">
					<div class="form-label">用户姓名</div>
					<div class="form-control">
						<span class="form-value" id="name">-</span>
					</div>
				</div>
			</div>
			
			<!-- 转赠金额 -->
			<div class="form-card">
				<div class="card-title">转赠金额</div>
				<div class="amount-input-row">
					<span class="currency-symbol">¥</span>
					<input type="text" name="t2" class="amount-input" placeholder="请输入转赠额" />
				</div>
				<div class="available-balance">
					可转赠额度：<span id="yue">{$info[cash]}</span>
				</div>
				<div class="zhuan">
					<a href="javascript:;" class="transfer-all-btn">全部转赠</a>
				</div>
			</div>
			
			<!-- 协议和链接 -->
			<div class="agreement-section">
				<div class="agreement-row">
					<label class="custom-checkbox">
						<input id="input" type="checkbox">
						<span class="checkbox-icon"></span>
						<span class="checkbox-label">已阅读并同意<a href="/zzgz.php">转赠规则</a></span>
					</label>
				</div>
				<div class="agreement-row">
					<a href="cwrecord.php" class="record-link">查看余额记录 →</a>
				</div>
			</div>
			
			<button class="submit-btn" type="button" onclick="huzhuan();">确认转赠</button>
		</form>
	</div>
	
	<script>
		$(".zhuan a").click(function () {
			$("input[name=t2]").val($("#yue").text());
		});
		
		$("#cardid").change(function(){
			cardid = $(this).val();
			$.ajax({
				type:"post",
				dataType:"json",
				url:"/Moudelu.php?m=m&a=searchm",
				data:"cardid="+cardid,
				success:function(d){
					if(d[0]==0){
						alert(d[1]);
						$("#name").text('-');
					}
					else{
						$("#name").html(d[1]);
					}
				}
			});
		});
		
		function huzhuan(){
			if (!$("#input").is(":checked")) {
				alert("请阅读并同意转赠规则");
				return;
			}
			
			var account = $("input[name=t1]").val().trim();
			if(!account) {
				alert("请输入对方账户");
				return;
			}
			
			var amount = $("input[name=t2]").val().trim();
			if(!amount) {
				alert("请输入转赠金额");
				return;
			}
			
			var msg = confirm("确认转赠该账户？");
			if(msg == true){
				$.ajax({
					type:"post",
					dataType:"json",
					url:"/Moudelu.php?m=m&a=huzhuan",
					data:$(".huzhuan").serialize(),
					success:function(d){
						if(d[0]==0){
							alert(d[1]);
						}
						else{
							alert(d[1]);
							window.location.href='cashhz.php';
						}
					}
				});
			}
		}
	</script>
</div>
{include(foot)}
</body>
</html>
